<template>
  <div>
    <div class="city_top"><i class="iconfont icon-fanhui" @click="back"></i>城市列表</div>
    <van-index-bar :index-list="indexList" highlight-color="red">
      <template v-for="item in dataList">
        <van-index-anchor  :index="item.index" :key="item.index"/>
        <van-cell v-for="(subitem,index) in item.data" :title="subitem.name" :key="index"/>
      </template>

    </van-index-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor } from "vant";
Vue.use(IndexBar);
Vue.use(IndexAnchor);

/*import { cityData } from '@/api/api'*/
import  axios from 'axios'


export default {
  data() {
    return {
      dataList : [],
      indexList: ["A","B"],
      cityData:  []
    };
  },

  /*methods: {
    async getData(){
      let ret = await cityData()
      console.log(ret)
      this.dataList = ret[0]
      this.indexList = ret[1]
    }
  },*/

  methods:{
    back(){
      this.$router.go(-1);
    }
  },


  // 城市列表请求
  mounted(){
    axios.get(("https://m.maizuo.com/gateway?k=7146061"),
        {
          headers: {
            "X-Client-Info":
                '{"a":"3000","ch":"1002","v":"5.0.4","e":"1598087896889693885431809","bc":"110100"}',
            "X-Host": 'mall.film-ticket.city.list',
          }
        }).then(ret=>{
      //console.log(ret)

      // 处理数据
      // 判断本地是否有缓存
      /*let cacheData = !localStorage.getItem('cityData') ? [] : JSON.parse(localStorage.getItem('cityData'))
      if(cacheData.length>0){
        /!*return Promise.resolve(cacheData)*!/
        return cacheData
      }*/
      // 定义城市字母索引
      let cityIndex = []
      let indexList = []

      let retData = ret.data.data.cities
      // 处理完后的数据
      let dataList = []
      for(let i = 65; i <=90; i++){
        cityIndex.push(String.fromCharCode(i))
      }
      //console.log(cityIndex)
      cityIndex.forEach(index=>{
        let tmpArr = retData.filter(item=>{
          return index.toLowerCase() == item.pinyin.substr(0,1)
        })

        if(tmpArr.length>0){
          indexList.push(index)
          dataList.push({
            index,
            data: tmpArr
          })
        }
      })
      let data = [dataList,indexList]
      /*localStorage.setItem('cityData', JSON.stringify(data))*/

      this.dataList = data[0]
      this.indexList = data[1]
      //console.log(this.dataList,this.indexList)
      //console.log(data)
    })

  },


  created() {
    // 发布隐藏指令
    this.$bus.$emit("FooterBar", false);
    /* this.$bus.$emit("FootBar", false); */
  },
  beforeDestroy() {
    // 离开时发布显示指令
    this.$bus.$emit("FooterBar", true);
    /* this.$bus.$emit("FootBar", true); */
  },
};
</script>

<style lang="scss" scoped>
.city_top{
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: white;
  .iconfont{
    font-size: 16px;
    margin: 0 10px;
  }
}
</style>

